<template>
	<view class="content">
		<image class="bgimg"
			src="https://phantombody.oss-cn-shanghai.aliyuncs.com/38be61316de2aa06e55f09be5519f6a819e9ae5139ed56b5eb3205e03835768c.png">
		</image>
		<image src="../../static/start_button.png" mode="widthFix" class="start_button"></image>
		<view class="start_buttontxt" :class="!showWxLogin?'bg1':'bg2'">快捷登录</view>
		<view class="login2btn" @click="changeLoginType" :class="showWxLogin?'bg1':'bg2'">账号密码登录</view>

		<view class="tostBox" v-if="!showWxLogin">
			<view class="PhoneBox">
				<view class="tostTitle">账号登录</view>
				<view class="telInputBox matop20">
					<u-icon name="account" color="#836FFE" size="28"></u-icon>
					<input class="telipt" maxlength="11" type="number" :value="inputValue0" placeholder="请输入手机号码 "
						@input="onPhoneInput" />
				</view>
				<view class="telInputBox matop20">
					<u-icon name="lock" color="#836FFE" size="28"></u-icon>
					<input class="telipt" maxlength="11" type="password" :value="inputValue2" placeholder="登录密码"
						@input="onPwdInput" />
				</view>
			</view>
			<view class="ubtnslogin" v-if="!showWxLogin">
				<u-button style="margin:50rpx 50rpx 0;width: 500rpx;" @click="API_login()" color="#836FFE"
					shape="circle" text="登录"></u-button>
			</view>
		</view>


		<view class="wxbtnBox">
			<u-button class="wxbtn" open-type="getPhoneNumber" @getphonenumber="loginWxPhoneNumber"
				plain="true">快捷登录</u-button>
		</view>
	</view>
</template>

<script>
	import WXBizDataCrypt from "./WXBizDataCrypt.js"

	export default {
		data() {
			return {
				showWxLogin: true,
				inputValue0: "15237820711",
				inputValue2: "123456",
				phone: "",
				phone_iv: "",
				js_code: "",
				session_key: "",
				phoneNumberRes: undefined,
				phone_encryptedData: undefined,
				phone_code: undefined,
				wxCode: "",
				appScreen: undefined
			}
		},
		onShow() {
			var that = this;
			if (uni.getStorageSync('accessToken')) {
				uni.reLaunch({
					url: '/pages/3d/index'
				})
			}
			that.ran
				.request('/app-api/system/user-model-order/getScreen', {}, 'GET').then(res => {
					console.log('appscreen', res);
					if (res.data) {
						that.appScreen = res.data
					}
				})

		},
		methods: {
			getSessionKey() {
				let that = this
				that.ran
					.request('/app-api/system/wx-mp/get?appid=wxa4086e7c14730fa4&secret=' + that.appScreen + "&js_code=" +
						that.js_code, {}, 'GET').then(res => {
						console.log('loginWxMinApi weixin-mini-app-login', res)

						if (res.code == 200) {
							let data = JSON.parse(res.data)
							console.log('获取信息', data);
							if (data) {
								this.session_key = data.session_key
							}

							if (data.openid) {
								uni.setStorageSync('openid', data.openid);
							}
							that.loginWxPhoneNet();
						}

					})

			},

			loginWxPhoneNumber(res) { // 获取手机号
				uni.showToast({
					icon: 'loading',
					title: '登录中'
				})
				this.phoneNumberRes = res
				let that = this
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res)
						that.js_code = res.code
						that.getSessionKey()
					}
				})



			},
			loginWxPhoneNet() {

				let res = this.phoneNumberRes
				this.phone_encryptedData = res.detail.encryptedData //用于解密
				this.phone_code = res.detail.code
				this.phone_iv = res.detail.iv // 用于解密
				console.log(res, "获取手机号需要的参数");

				// uni.showModal({
				// 	content:"session_key "+this.session_key
				// })
				let pc = new WXBizDataCrypt('wxa4086e7c14730fa4', this.session_key);
				// let pc = new WXBizDataCrypt('wxa4086e7c14730fa4', "77e8a9d7379a6ed43a27136f30f92783");
				let data = pc.decryptData(this.phone_encryptedData, this.phone_iv);
				console.log(data);

				if (data.phoneNumber != '') {
					this.phone = data.phoneNumber
				}
				this.API_WX_LOGIN()
			},

			changeLoginType: function() {
				this.showWxLogin = !this.showWxLogin
			},
			onPhoneInput: function(event) {
				this.inputValue0 = event.target.value;
			},
			onPwdInput: function(event) {
				this.inputValue2 = event.target.value;
			},
			API_WX_LOGIN() {
				let self = this


				// uni.showLoading({
				// 	content:"登陆中"
				// })
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(loginRes) {
						console.log(loginRes);
						let code = loginRes.code
						self.wxCode = code

						// uni.showModal({
						// 	content:"API_WX_LOGIN  1"+self.wxCode
						// })
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log('用户昵称为：' + JSON.stringify(infoRes));
								console.log('用户昵称为：' + infoRes.userInfo.nickName); // 昵称
								console.log('用户昵称为：' + infoRes.userInfo.avatarUrl); // 头像

								uni.hideLoading();

								self.ran
									.request('/app-api/member/auth/weixin-mini-app-login', {
										"loginCode": self.wxCode,
										"phoneCode": self.phone_code,
									}, 'POST').then(res => {
										console.log('loginWxMinApi weixin-mini-app-login', res)

										if (res.code == 200) {

											uni.setStorageSync('accessToken', res.data
												.accessToken);
												
											uni.setStorageSync('refreshToken', res.data
												.refreshToken);
											uni.setStorageSync('userId', res.data.userId);

											setTimeout(function() {
												// uni.navigateBack({
												// 	delta: 1
												// })
												uni.reLaunch({
													url: '/pages/3d/index'
												})

											}, 200)
										}

									}).catch(res => {
										console.log('catch res weixin-mini-app-login', res)
										uni.hideLoading();
										if (res.code == 1002000005 || res.code ==
											100202581) { // 代表没有绑定用户 提示需要绑定 跳转到绑定用户页面
											// 调用手机号登陆
											// 调用注册
											// 调用是否能查到手机号，如果能查到就跳转登陆页面  如果查不到就注册登陆

											self.ran
												.request('/app-api/member/user/page', {
													"mobile": self.phone,
												}, 'POST').then(res => {
													console.log('member/user/p', res)
												})


										} else {
											// setTimeout(function() {
											// 	uni.navigateBack({
											// 		delta: 1
											// 	})
											// }, 2000)
											setTimeout(function() {

												uni.showModal({
													title: '提示',
													content: '登录失败',
													showCancel: false
												})

											}, 200)
										}
									})
							}
						});

					},
					complete(res) {
						uni.hideLoading();
					}
				});
			},
			API_login() {
				var that = this;
				uni.showToast({
					title: '登录中',
					icon: 'loading'
				});
				that.ran
					.request('/app-api/member/auth/login', {
						"mobile": that.inputValue0,
						"password": that.inputValue2,
					}, 'POST')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							uni.setStorageSync('accessToken', res.data.accessToken);
							uni.setStorageSync('refreshToken', res.data
								.refreshToken);
							uni.setStorageSync('userId', res.data.userId);
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							setTimeout(function() {

								uni.reLaunch({
									url: '/pages/3d/index'
								})
							}, 200)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	page {
		/* background-image: linear-gradient(to bottom right, #e5e5e5, #f4f4f4); */
	}

	.ubtnslogin {
		width: 500rpx;
		margin: 50rpx 50rpx 0;
	}

	.tostBox {
		background: #fff;
		position: absolute;
		border-radius: 14rpx;
		top: 50%;
		margin-top: -300rpx;
		width: 600rpx;
		height: 600rpx;
		left: 75rpx;

		.tostTitle {
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.bgimg {
		width: 100vw;
		height: 100vh;
		display: block;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
	}

	.start_button {
		width: 400rpx;
		position: absolute;
		bottom: 8vh;
		left: 175rpx;
		display: block;
	}

	.wxbtnBox {
		width: 400rpx;
		height: 130rpx;
		position: absolute;
		bottom: 8vh;
		left: 175rpx;
		display: block;
		opacity: 0;
	}

	.wxbtn {
		width: 400rpx;
		height: 130rpx;
		display: block;
	}

	.bg1 {
		background: #cac5fe;
	}

	.bg2 {
		background: #836FFE;
	}

	.start_buttontxt {
		width: 260rpx;
		position: absolute;
		bottom: calc(8vh + 60rpx);
		left: 245rpx;
		color: #fff;
		line-height: 66rpx;
		border-radius: 66rpx;
		text-align: center;
		font-size: 36rpx;

	}

	.login2btn {
		width: 200rpx;
		position: absolute;
		bottom: 4vh;
		left: 275rpx;
		display: block;
		color: #fff;
		line-height: 40rpx;
		border-radius: 40rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.changeLogin {
		margin: 150rpx 25rpx 0;
		width: 700rpx;
		text-align: center;
		color: #1e9bcc;
		border: #1e9bcc;
	}

	.ubtns {
		margin: 150rpx 25rpx 0;
		width: 700rpx;
	}

	.matop20 {
		margin-top: 30rpx;
	}

	.PhoneBox {
		padding: 20upx 50upx;
		overflow: hidden;
		margin: auto;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		top: -50rpx;
		background: #fff;

		.tel_tile {
			font-weight: bold;
			line-height: 100upx;
			font-size: 40upx;
		}

		.CodeInputBox {
			width: 550upx;
			overflow: hidden;
			background: #efefef;
			border-radius: 80upx;

			.codebtns {
				width: 250upx;
				line-height: 100upx;
				float: right;
				text-align: center;
				box-sizing: border-box;
				border-right: 1upx solid #eee;
			}

			.telipt {
				width: 310upx;
				padding: 10upx 20upx;
				line-height: 80upx;
				height: 80upx;
				float: left;
			}
		}

		.telInputBox {
			width: 500upx;
			overflow: hidden;
			padding: 10upx 0;
			border-bottom: 2px solid #836FFE;
			display: flex;
			justify-content: center;
			align-items: center;

			.add86 {
				width: 80upx;
				height: 80upx;
				float: left;
			}

			.telipt {
				width: 360upx;
				padding: 0 20upx;
				line-height: 80upx;
				height: 80upx;
				float: left;
			}
		}

		.getPhoneBtn {
			width: 600upx;
			height: 100upx;
			line-height: 100upx;
			border-radius: 10upx;
			text-align: center;
			color: #fff;
			background: blue;
			margin-top: 50upx;
		}
	}
</style>